<template>
  <div class="monitorplantform-page">
    <!-- <gz-header
            title="目标态势监测数据应用平台"
            style="z-index: 5"></gz-header> -->
    <Earth
      :toolboxOptions="{ top: 100, right: 400 }"
      :doubleClickEvent="false"
      :mode2d="false"
    />
    <!--<EarthSearch />-->
    <EarthMonitor />

    <div class="timeLine" v-if="showTimeLine">
      <timeline />
    </div>

    <div style="position: absolute; top: 100px; right: 29px">
      <el-switch
        v-model="islockdir"
        class="ml-2"
        inline-prompt
        style="--el-switch-on-color: #13ce66"
        active-text="锁定朝向"
        inactive-text="锁定朝向"
      />
    </div>
  </div>
</template>

<script setup>
import { useEarthStore } from "@/stores/earth";
import EarthMonitor from "@/components/common/Earth/earthmonitor.vue";
import Earth from "@/components/common/Earth/earth/earth.vue";

import timeline from "./common/timeline.vue";

const earthStore = useEarthStore();
import { useRoute } from "vue-router";
import { watch, onMounted, computed, ref, reactive } from "vue";
const route = useRoute();

let islockdir = ref(true);

setTimeout(() => {
  // viewer.scene.preRender(() => {
  //   // if (viewer.camera.roll != 0) {
  //   //   viewer.camera.roll = 0.0
  //   // }

  //   console.log(viewer.camera.heading,viewer.camera.pitch,viewer.camera.roll);

  // })

  viewer.scene.preRender.addEventListener(() => {
    // console.log(islockdir.value);
    if (
      (Cesium.Math.toDegrees(viewer.camera.heading) != 0 ||
        Cesium.Math.toDegrees(viewer.camera.pitch) != 0) &&
      islockdir.value
    ) {
      // console.log(5555);
      // viewer.camera.heading = 100.0;
      viewer.camera.setView({
        orientation: {
          heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
          pitch: Cesium.Math.toRadians(-90), // default value (looking down)
          roll: 0.0, // default value
        },
      });
    }

    // 判断高度自动切换二三维

    // if (viewer.camera.positionCartographic.height > 4791000) {
    //   viewer.scene.mode = Cesium.SceneMode.SCENE2D
    // }else{
    //   viewer.scene.mode = Cesium.SceneMode.SCENE3D
    // }

    // console.log(Cesium.Math.toDegrees(viewer.camera.heading));
    // console.log(Cesium.Math.toDegrees(viewer.camera.pitch));
    // console.log(viewer.camera.positionCartographic.height);
    // console.log(Cesium.Math.toDegrees(viewer.camera.positionCartographic.height));

    //  237740178

    // console.log(Cesium.Math.toDegrees(viewer.camera.roll));

    // console.log(viewer.camera.heading,viewer.camera.pitch,viewer.camera.roll);
  });

  //  viewer.camera.changed.addEventListener(() => {

  //   // 当前高度
  //   // 下面可以写其他的代码了
  // });
  initxqxlayers();
}, 3000);

function initxqxlayers(params) {
  let imgopt = {
    // 这里是你的 geoserver服务点击查看图层的 url
    url: "/geoserver/test_tif/wms",
    // 这里是自定义的图层名称
    // parameters: {
    //   service: "WMS",
    //   FORMAT: "image/png",
    //   version: "1.3.0",
    //   TRANSPARENT: true,
    //   LAYERS: `test_tif:yxrh_line`,
    //   crs: "EPSG:4326",
    //   // LAYERS: "test_tif:TRIPLESAT_2_MS_L1_20201226020854_002764VI_003",
    // },
    // // rectangle: rec,
    // minimumLevel: 0,
    // maximumLevel: 18,

    url: "/geoserver/test_tif/wms",
    layers: "test_tif:yxrh_line",
    parameters: {
      transparent: true, //务必设为true。否则不显示底图
      format: "image/png",
      srs: "EPSG:4326",
    },
  };
  
  let basemapSource = new Cesium.WebMapServiceImageryProvider(imgopt);
  let img_quanjing = earth.sceneTree.$refs.quanjingwms.czmObject;
  img_quanjing.xbsjImageryProvider.type = "WebMapServiceImageryProvider";
  img_quanjing.xbsjImageryProvider.WebMapServiceImageryProvider._imageryProvider = basemapSource;
}

const showTimeLine = computed(() => {
  return earthStore.showTimeLine;
});
// 是否需要分屏对比
watch(
  () => route.path,
  (to, from) => {
    earthStore.pannellist = {};
    // 在这里可以执行你需要的逻辑
    // 例如：更新页面数据、记录页面访问历史等
  }
);
onMounted(() => {
  setTimeout(() => {
    // loadGeoJson()
  }, 3000);
});
function loadGeoJson() {
  // 监听鼠标移动事件
  viewer.scene.globe.enablePicking = true; // 确保可以拾取到实体
  // Create a new ScreenSpaceEventHandler to handle mouse events
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // Set up a tooltip div to display the information
  const tooltip = document.createElement("div");
  tooltip.style.position = "absolute";
  tooltip.style.backgroundColor = "rgba(0,0,0,.5)";
  tooltip.style.padding = "5px";
  tooltip.style.border = "1px solid black";
  tooltip.style.display = "none";
  let id = document.getElementById("main");
  id.appendChild(tooltip);

  // Function to show the tooltip
  function showTooltip(position, content) {
    tooltip.style.left = 30 + "px";
    tooltip.style.bottom = 30 + "px";
    tooltip.innerHTML = content;
    tooltip.style.display = "block";
  }

  // Function to hide the tooltip
  function hideTooltip() {
    tooltip.style.display = "none";
  }

  // Handle mouse move event
  handler.setInputAction(function (movement) {
    const pickedObject = viewer.scene.pick(movement.endPosition, 3, 3);
    // const entity = pickedObject.id;
    // const properties = entity.properties;

    const content = `
                    <strong>成像时间:</strong> 2023-10-10 03:04:05<br>
                    <strong>数据来源:</strong> 卫星1号<br>
                `;

    showTooltip(movement.endPosition, content);
    // // debugger
    // const pickedObject = viewer.scene.pick(movement.endPosition, 3, 3);
    // console.log(pickedObject, 'pickedObject')
    // //
    // if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
    //   const entity = pickedObject.id;
    //   const properties = entity.properties;
    //
    //   const content = `
    //                 <strong>成像时间:</strong> 2023-10-10 03:04:05<br>
    //                 <strong>数据来源:</strong> 卫星1号<br>
    //             `;
    //
    //   showTooltip(movement.endPosition, content);
    // } else {
    //   hideTooltip();
    // }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  // Hide the tooltip when the mouse leaves the canvas
  handler.setInputAction(hideTooltip, Cesium.ScreenSpaceEventType.MOUSE_OUT);
  // // var viewer = new Cesium.Viewer('cesiumContainer');
  // // setTimeout()
  // Cesium.GeoJsonDataSource.load('/mosac_line.geojson').then(function (dataSource) {
  //   viewer.dataSources.add(dataSource);
  //   viewer.flyTo(dataSource);
  //
  // });
}
</script>

<style lang="scss" scoped>
.search-bar {
  position: absolute;
  top: 60px;
  left: 30px;
  z-index: 10;
}

.monitorplantform-page {
  width: 100%;
  height: 100%;
  position: relative;
}
.timeLine {
  position: fixed;
  top: 100px;
  z-index: 1000;
  left: 50px;
  // width: 300px;
  // height: 50px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #1E1C1899;
  // padding: 35px 20px 0px 20px;
}
</style>
